<template>
    <div ref="chart1" style="height: 400px;">

    </div>
</template>

<script setup lang="ts">
// import axios from "axios";
import * as echarts from "echarts";
import type { EChartsOption } from 'echarts/types/dist/echarts.d.ts'
import { onMounted, ref, watch } from "vue";



let arr: string[] = ["rgba(250,185,0)", "rgba(254,33,30)", "rgba(22,242,217)", "rgba(44,110,255)", "rgba(11,168,44)"]
// 配置项
let option: EChartsOption = {
    color: arr,
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            label: {
                backgroundColor: '#fff'
            }
        },
        backgroundColor: 'rgba(34, 39, 35, 0.7)',
        textStyle: {
            color: '#fff'
        }

    },
    legend: {
        data: [] as string[],
        textStyle: {
            fontSize: 10, // 字体大小
            color: "#fff"
        },
        icon: 'circle',
        itemWidth: 10, // 图标宽度
        itemHeight: 10, // 图标高度
        top: "20"
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: []
};

let chart1 = ref<HTMLDivElement | null>(null)
let myECharts: echarts.ECharts | null = null

function init() {
    myECharts = echarts.init(chart1.value)
    // 关联
    option && myECharts.setOption(option)

    getData()
}

let original: any = []
let props = defineProps<{ k: string }>()

function getData() {
    // axios.get("/api/trend.json").then(({ data }) => {
    //     original = data
    //     // console.log(data);
    //     changeOption()
    // })
    const ws = new WebSocket("ws://localhost:9998")

    ws.onopen = () => {
        console.log("Connect success!")

        ws.onmessage = (res) => {
            let a = JSON.parse(res.data)
            let b = JSON.parse(a.data)
            original = b
            changeOption()
        }

        ws.send(JSON.stringify({
            action: "getData",
            chartName: "trend"
        }))
    }
}

function changeOption() {
    (option.legend as any).data = original[props.k].data.map((item: any) => item.name);
    option.series = [];
    (option.xAxis as any).data = original.common.month;
    original[props.k].data.forEach((item: any, index: number) => {
        (option.series as any).push({
            name: item.name,
            type: 'line',
            stack: "Total",
            smooth: true,
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: arr[index] as string,
                    },
                    {
                        offset: 1,
                        color: (arr[index] as string).replace(")", ",0)")
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: item.data
        })
        myECharts?.setOption(option)
    })
}

watch(
    () => props.k,
    () => {
        changeOption()
    }
)

onMounted(() => {
    init()
    window.addEventListener('resize', () => { myECharts?.resize() });
})
</script>
